<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-style.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-media.css}" />
    <link rel="stylesheet" th:href="@{/css/metroStyle.css}" type="text/css">
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
    <title>日志管理</title>
    <style>
        #main{
           position:relative;
            top: 300px;
        }


    </style>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">通用权限管理</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-menu-->
<div th:include="common/top :: top"></div>
<div th:include="common/menu :: menu"></div>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> </div>
    </div>
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="span12">

                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
                        <h5>数据可视化</h5>
                    </div>
                    <div id="main" style="height:400px"></div>
                    <div id="main1" style="height:300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12">2021 @kh<a href="http://www.baidu.com">RBAC</a> </div>
</div>
<!--end-Footer-part-->
<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.when(
        $.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
        $.getScript('https://www.runoob.com/static/js/draggable.js')
    ).done(function () {
        var superAdmin;
        var admin;
        var ordinaryUser;
        var student;
        var teacher;
        var headmaster;
        var frontEnd;
        var backEnd;
        $.ajax({
            cache:true,
            type:"GET",
            url:"logs/roleUser",
            async: false,
            success:function (result) {
                superAdmin = result.superAdmin;
                admin = result.admin;
                ordinaryUser = result.ordinaryUser;
                student = result.student;
                teacher = result.teacher;
                headmaster = result.headmaster;
                frontEnd = result.frontEnd;
                backEnd = result.backEnd;
            }
        })

        draggable.init(
            $('div[_echarts_instance_]')[0],
            myChart,
            {
                width: 1188,
                height: 311,
                throttle: 70
            }
        );
        myChart.hideLoading();
        option = {
            baseOption: {
                title : {
                    text: 'RBAC权限管理系统',
                    subtext: '角色对应的用户数量',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['超级管理员','管理员','普通用户','学生','老师','校长','前端','后端']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'半径模式',
                        type:'pie',
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:[
                            {value:superAdmin, name:'超级管理员'},
                            {value:admin, name:'管理员'},
                            {value:ordinaryUser, name:'普通用户'},
                            {value:student, name:'学生'},
                            {value:teacher, name:'教师'},
                            {value:headmaster, name:'校长'},
                            {value:frontEnd, name:'前端'},
                            {value:backEnd, name:'后端'}

                        ]
                    },
                    {
                        name:'面积模式',
                        type:'pie',
                        roseType : 'area',
                        data:[
                            {value:superAdmin, name:'超级管理员'},
                            {value:admin, name:'管理员'},
                            {value:ordinaryUser, name:'普通用户'},
                            {value:student, name:'学生'},
                            {value:teacher, name:'教师'},
                            {value:headmaster, name:'校长'},
                            {value:frontEnd, name:'前端'},
                            {value:backEnd, name:'后端'}
                        ]
                    }
                ]
            },
            media: [
                {
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['25%', '50%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['75%', '50%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        minAspectRatio: 1
                    },
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['25%', '50%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['75%', '50%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        maxAspectRatio: 1
                    },
                    option: {
                        legend: {
                            right: 'center',
                            bottom: 0,
                            orient: 'horizontal'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['50%', '30%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['50%', '70%']
                            }
                        ]
                    }
                },
                {
                    query: {
                        maxWidth: 500
                    },
                    option: {
                        legend: {
                            right: 10,
                            top: '15%',
                            orient: 'vertical'
                        },
                        series: [
                            {
                                radius: [20, '50%'],
                                center: ['50%', '30%']
                            },
                            {
                                radius: [30, '50%'],
                                center: ['50%', '75%']
                            }
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);

        var myChartOne = echarts.init(document.getElementById('main1'));
        var user;
        var role;
        var resources;
        var log;
        //数据来源
        $.ajax({
            cache:true,
            type:"GET",
            url:"logs/echartsList",
            async: false,
            success:function (result) {
                user = result.userCount;
                role = result.roleCount;
                resources = result.resourcesCount;
                log = result.logCount;
            }
        })
        var app = {};
        option = null;
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '系统模块数据统计',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['用户','角色','资源','日志']
            },
            series : [
                {
                    name: '模块数据',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:user, name:'用户'},
                        {value:role, name:'角色'},
                        {value:resources, name:'资源'},
                        {value:log, name:'日志'},

                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        app.currentIndex = -1;

        setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChartOne.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChartOne.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            // 显示 tooltip
            myChartOne.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
        }, 1000);
        if (option && typeof option === "object") {
            myChartOne.setOption(option, true);
        }



    });
</script>
</body>
</html>